import { ProFormSelect } from '@ant-design/pro-components';
import {
  DrawerForm,
  ProFormInstance,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Col, Row } from 'antd';
import React, { useRef } from 'react';
import { useModel } from 'umi';

type VpnServerFormProps = {
  visible: boolean;
  current: API.CheckServer | undefined;
  onCancel: () => void;
  onSubmit: (values: API.CheckServer) => Promise<void>;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, current, onCancel, onSubmit } = props;

  if (!visible) {
    return null;
  }
  
  const { getGeoipIspOptions } =
    useModel('useGlobalModel', (model) => ({
      getGeoipIspOptions: model.getGeoipIspOptions,
    }));

  const formRef = useRef<ProFormInstance>();

  return (
    <DrawerForm<API.CheckServer>
      open={visible}
      initialValues={current}
      title={`${current ? '编辑' : '添加'}检测服务器`}
      formRef={formRef}
      autoFocusFirstInput
      width={824}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={24}>
          <ProFormText
            name="id"
            label="编码"
            rules={[{ required: true, message: '请输入编码' }]}
            placeholder="请输入编码"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
            placeholder="请输入名称"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name="groupName"
            label="分组"
          />
        </Col>
        <Col span={24}>          
          <ProFormSelect
            name='ispIds'
            label="ISP运营商"
            mode='single'
            options={getGeoipIspOptions()}
          />
        </Col>
        <Col span={3}>
          <ProFormSwitch name="status" label="状态" initialValue={true} />
        </Col>
        <Col span={24}>
          <ProFormTextArea name="remark" label="备注" />
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default VpnServerForm;
